<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息修改</title>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/css/userPerson.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">

    <style>
        .error{
            color:red;
        }
    </style>
</head>
<body>

<!--引入导航栏-->
<div th:replace="~{head/topbar::topBar}"></div>

  <!-- 个人信息修改 开始 -->
<form id="userInfo" method="post" th:action="@{/houseCol/userUpdate}">
  <div class="container container-user" id="userInfomation">
    <div class="row" style="margin-bottom: 30px;">
      <div class="col">
        <div class="jumbotron233">
          <div class="row" id="welcome">
            <h1 class="display-4">欢迎回来 !</h1>
          </div>

          <div id="picture" >
            <a class="nav-link nav-link-user-img" id="v-pills-profile-tab"  href="javascript:void(0)" role="tab" aria-selected="false"><img th:src="${session.user.userImg}"  style="width:200px;height: 200px; border: 10px solid white;" alt="图片加载失败"></a>
          </div>

          <div class="message">
            <div class="topuser">
              <div class="username">
                <span th:text="${session.user.userName}"></span>
              </div>
              <div class="returnlast">
                <a th:href="@{/houseCol/userInfo}">返回我的主页<i class="fa fa-hand-o-up" aria-hidden="true"></i></a>
              </div>
            </div>

            <div id="form-box-one" style="display: block;">
              <div class="midd-box">
                <div class="row">
                   <div class="col-md-11" hidden>
                        <input type="text" class="form-control all-input"  th:value="${user.userId}" name="userId" style="width: 300px; border: 0px;">
                    </div>
                  <div class="col-md-11">
                      <i id="tip"></i>
                      <div class="form-group formbox">
                        用户昵称:
                      </div>
                      <input type="text" class="form-control all-input" id="userName" placeholder="请输入新的账号昵称" name="userName" th:onchange="changName()" style="width: 300px; border: 0px;">
                      <span></span>
                  </div>

                  <div class="col-md-11">

                      <div class="form-group formbox">
                        手机号:
                      </div>
                      <input type="text" class="form-control all-input" id="userTel" placeholder="请输入手机号码" name="userTel" style="width: 300px; border: 0px;">

                  </div>

                  <div class="col-md-11">

                      <div class="form-group formbox">
                        身份证号码:
                      </div>
                      <input type="text" class="form-control all-input" id="userIdNum" placeholder="请输入身份证号" name="idNumber" style="width: 300px; border: 0px;">

                  </div>

                  <div class="col-md-11">

                      <div class="form-group formbox">
                        修改密码:
                      </div>
                      <input type="password" class="form-control all-input" id="userPwd" placeholder="请输入修改密码" name="userPwd" style="width: 300px; border: 0px;" pattern="[a-zA-Z0-9]{6,9}">

                  </div>

                  <div class="col-md-11">
                      <div class="form-group formbox" >
                        确认密码:
                      </div>
                      <input type="password" class="form-control all-input" id="usr" placeholder="请确认修改密码" name="confirm_userPass" style="width: 300px; border: 0px;">
                  </div>

                  <div class="col-md-11">

                      <div class="form-group" style="margin-left: 250px;">
                        <!--<button type="button" class="btn btn-primary " style="background-color: #01bc6a; border: #01bc6a; margin-right: 15px;">修改信息</button>-->
                        <input type="submit" value="确认修改" class="btn btn-primary" style="background-color: #01bc6a; border: #01bc6a;">
                        <!--<button type="button" class="btn btn-primary " style="background-color: #01bc6a; border: #01bc6a;" id="updateInfo">保存修改</button>-->
                      </div>

                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</form>

    <!-- 个人信息修改 结束 -->


  <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
  <script th:src="@{https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js}"></script>
  <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script th:src="@{/airent/js/jquery.validate.min.js}"></script>
  <script th:src="@{/airent/js/messages_zh.min.js}"></script>


  <script th:inline="javascript">
      //前端验证
      $().ready(function () {
          $('#userInfo').validate({
              ignore : [],
              rules:{
                  userName:{
                      required:true,
                      isName:true
                  },
                  userPwd:{
                      required:true,
                      isPass:true
                  },
                  confirm_userPass:{
                      required:true,
                      equalTo: "#userPwd"
                  },
                  userTel:{
                      required:true,
                      isTel:true,
                  },
                  idNumber:{
                      required:true,
                      isIdNum:true,
                  },
              },
              messages:{
                  userName:{
                      required:'不能为空',
                      isName:'字母开头长度6',
                  },
                  userPwd:{
                      required:'不能为空',
                      isPass:'长度6位',
                  },
                  confirm_userPass:{
                      required:'不能为空',
                      equalTo:'两次输入密码要一致'
                  },
                  userTel:{
                      required:'不能为空',
                      isTel:'首位为1第二位为[3,4,5,7,8]中一个 长度为11',
                  },
                  idNumber:{
                      required:'不能为空',
                      isIdNum:'提示太长 请输入正确身份证号码规则长度为18',
                  },
              }
          }),
          //增加手机号验证规则
          $.validator.addMethod("isTel", function(value, element) {
              var length = value.length;
              var mobile = /^[1][3,4,5,7,8][0-9]{9}$/;
              return this.optional(element) || (length == 11 && mobile.test(value));
          }, "首位为1第二位为[3,4,5,7,8]中一个 长度为11");
          $.validator.addMethod("isName", function(value, element) {
              var length = value.length;
              var mobile = /^[a-zA-Z]\w{4,8}$/;
              return this.optional(element) || (length == 6 && mobile.test(value));
          }, "字母开头长度6");
          $.validator.addMethod("isPass", function(value, element) {
              var length = value.length;
              var mobile = /^[a-zA-Z0-9]{6,9}$/;
              return this.optional(element) || (length == 6 && mobile.test(value));
          }, "长度6");
          $.validator.addMethod("isIdNum", function(value, element) {
              var length = value.length;
              var mobile = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
              return this.optional(element) || (length == 18 && mobile.test(value));
          }, "提示太长 请输入正确身份证号码规则长度为18");

      })

  </script>

  <script>
   let btn_price = $("#btn-price");
   btn_price.click(function () {
     btn_text = btn_price.html();
     if (btn_text == "价格" || btn_text == "价格↓") {
       btn_text = "价格↑"
     } else {
       btn_text = "价格↓"
     }
     btn_price.html(btn_text);
   })

   let btn_area = $("#btn-area");
   btn_area.click(function () {
     btn_text = btn_area.html();
     if (btn_text == "面积" || btn_text == "面积↓") {
       btn_text = "面积↑"
     } else {
       btn_text = "面积↓"
     }
     btn_area.html(btn_text);
   })
 </script>

</body>
</html>
